import React, { useEffect, useState } from 'react'
import { Table, Modal, Button, Switch ,Form, Input, Radio} from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm } = Modal;
export default function () {
  const [dataSource, setDataSource] = useState([])
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    axios.get('http://localhost:8000/users?_expand=role').then(res => {
      console.log(res)
      setDataSource(res.data)
    })
  }, [])
  const columns = [
    {
      title: '区域',
      dataIndex: 'region',
      render: (key) => {
        return <b>{key == "" ? "全球" : key}</b>
      }
    },
    {
      title: '角色名称',
      dataIndex: 'role',
      render: (role) => {
        return role?.roleName
      }
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '用户状态',
      dataIndex: 'roleState',
      render: (roleState, item) => {
        return <div>
          <Switch checked={roleState} disabled={item.default}></Switch>
        </div>
      }
    },
    {
      title: "操作",
      render: (key) => {
        return <div>
          <Button
            type="danger"
            shape="circle"
            onClick={() => { showConfirm(key) }}
            icon={<DeleteOutlined />}
            disabled={key.default}
          />
          <Button
            type="primary"
            shape="circle"
            icon={<EditOutlined />}
            disabled={key.default}
            onClick={() => {

            }} />
        </div>
      }
    }
  ]
  const showConfirm = (item) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        detaMethod(item)
      },
      onCancel() {
      },
    });
  }

  // 删除 当前页面同步状态 + 后端同步
  const detaMethod = (item) => {
    // let newdata = []
    // newdata = dataSource.filter(data => data.id !== item.id)
    // axios.delete(`http://localhost:8000/roles/${item.id}`).then(res => {
    //   // console.log(res)
    // })
    // setDataSource([...newdata])
  }

  const onCreate = (values) => {
    console.log('Received values of form: ', values);
    setVisible(false);
  };
  return (
    <div>
      <button  type="primary"
        onClick={() => {
          setVisible(true);
        }}>
      </button>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={
          { pageSize: 5 }
        } />;
      <Modal
        visible={visible}
        title="添加用户"
        okText="确定"
        cancelText="取消"
        onCancel={setVisible(false)}
        onOk={() => {
          form
            .validateFields()
            .then(values => {
              form.resetFields();
              onCreate(values);
            })
            .catch(info => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={{ modifier: 'public' }}
        >
          <Form.Item
            name="title"
            label="Title"
            rules={[{ required: true, message: 'Please input the title of collection!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input type="textarea" />
          </Form.Item>
          <Form.Item name="modifier" className="collection-create-form_last-form-item">
            <Radio.Group>
              <Radio value="public">Public</Radio>
              <Radio value="private">Private</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
